<template>
  <el-button
    :class="['custom-button', { 'is-selected': isSelected }]"
    @click="toggleSelect"
  >
    <slot></slot>
  </el-button>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  modelValue: Boolean
})

const emit = defineEmits(['update:modelValue'])

const isSelected = ref(props.modelValue)

const toggleSelect = () => {
  isSelected.value = !isSelected.value
  emit('update:modelValue', isSelected.value)
}
</script>

<style>
.custom-button {
  width: 140px;
  background: linear-gradient(
    to bottom,
    rgba(188, 205, 246, 0.3),
    /* 上方颜色，70% 不透明度 */ rgb(102, 162, 245) /* 下方颜色，完全不透明 */
  );
  border: none;
  color: white;
  transition: background 0.3s;
}

.custom-button.is-selected {
  background: linear-gradient(90deg, #5ed1f7 0%, #4791f3 100%);
}

.custom-button:hover {
  opacity: 0.9;
}
</style>
